<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
            color: red;
        }
        .blue{
            color: blue;
        }
        .fs{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <!-- <p class="red fs">a</p>
    <p class=blue fs>b</p> -->

    <!-- 响应式 : MVVM-数据驱动-vue监控数据变化，当数据发生变换时与之关联的DOM元素也会更新 -->
    <!-- 
        模板语法是为页面渲染提供特殊定义代码规则
            + 属性绑定语法：通过对标签属性的动态取值操作，结合vue的响应式特性，实现基于属性的页面渲染效果
            + 指令的组成：v-指令名[:指令参数]=取值  ==> 不同指令的取值规则不同
                => 属性取值  v-bind:属性名 = 等效插值表达式
                => 功能控制  v-on:JS事件名称 = 回调方法(取值是方法的动态变量)
                                               ！！ 可以取值响应式仓库的属性变量，但该属性取值必须是方法
                                               ！！ 回调方法的参数规则基本等同于 常规JS
                                            = 因为事件对应的方法并不需要执行响应式操作，所以vue专门提供了无响应式的方法定义仓库 methods
                => 结构操作 
                            v-if = 具有boolean类型的返回结果(仓库的boolean类型变量,也可以是具有boolean运行结果的表达式)
                                   判断页面元素是否需要显示
                            v-for = 循环临时变量 in 待循环数据(仓库中的数据) ||  (循环临时变量,循环临时变量) in 待循环数据(仓库中的数据)
                                   循环页面元素
    -->
    <div id="app">
        <h3>v-bind指令:为标签的基本属性进行动态取值操作</h3>
        <p v-bind:class=classStr >v-bind对class动态绑定</p>
        <p v-bind:class="classStr" >v-bind对class动态绑定{{ classStr }}</p>
        <p v-bind:class="'classStr'" >v-bind对class动态绑定{{ 'classStr' }}</p>
        <p class="classStr" >class绑定</p>
        <p v-bind:style=" styleStr ">v-bind动态绑定style</p>
        <hr>
        <h3>v-on指令:为标签绑定事件功能</h3>
        <input type="button" value="changeClassStrValue" v-on:click="fun1"> <br>
        <input type="button" value="changeClassStrValue" v-on:click="fun1(1234)"> <br>
        <input type="button" value="changeClassStrValue" v-on:click="fun1('字符串参数')">
        <!-- <input type="button" value="changeClassStrValue" v-on:click="fun1(this)"> -->
        <hr>
        <h3>v-if指令:判断标签是否显示</h3>
        <p v-if=" num>10 ">num变量大于10</p>
        <input type="button" value="+" v-on:click="addNum()">
        <input type="button" value="-" v-on:click="subNum()">
        <h3>v-for指令:循环标签</h3>
        <ul>
            <!-- <li v-for=" item in arr "> -->
            <li v-for=" (item,i) in arr ">
                {{ item }}
                <input type="button" value="X" v-on:click="removeArrItem( i )">
            </li>
        </ul>
        <input type="button" value="addItem" v-on:click="addItem()">
    </div>
    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js"

        // 链式调用
        createApp({
            data(){
                return {
                    classStr:"red",
                    styleStr:"color:red",
                    // fun1:function(arg){
                    //     console.log(1,arg)
                    // },
                    num:10,
                    arr:["aaaaa","bbbbb","ccccc","ddddd"]
                }
            },
            // 定义不参与响应式操作的 普通执行方法
            methods:{
                // key:value
                //      key 方法名
                //      value 方法值
                fun1:function(arg){
                    console.log(1,arg)
                    // vue中methods中定义方法，在方法体中this指向于vue的实例对象
                    console.log(this.classStr);
                    this.classStr = this.classStr=="red"?"blue":"red"
                },
                addNum(){
                    this.num += 1;
                },
                subNum(){
                    this.num -= 1;
                },
                addItem(){
                    this.arr.push( Math.ceil( Math.random()*1000 ) )
                },
                removeArrItem(i){
                    console.log(i)
                    this.arr.splice(i,1)
                }
            }
        }).mount("#app")

        
    </script>
</body>
</html>